<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}
        <link href="{{ asset('css/bootstrap.min.css') }}" type="text/css" rel="stylesheet" />
        <link href="{{ asset('css/responsive.css') }}" type="text/css" rel="stylesheet" />
        {% endblock %}
        <link rel="shortcut icon" href="{{ asset('favicon.ico') }}" />
        <style type="text/css">
            body {
                padding-top: 60px;
            }
        </style>
    </head>
    <body>
        {% block body %}
        {% block topbar %}
        <div class="topbar">
            <div class="topbar-inner">
                <div class="container-fluid">
                    <a class="brand" href="#">Project name</a>
                    <ul class="nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                    <form action="" class="pull-right">
                        <input class="input-small" type="text" placeholder="Username">
                        <input class="input-small" type="password" placeholder="Password">
                        <button class="btn" type="submit">Sign in</button>
                    </form>
                </div>
            </div>
        </div>
        {% endblock %}
        {% block container %}
        <div class="container-fluid">
            <div class="sidebar">
                {% block sidebar %}{% endblock %}
            </div>
            <div class="content">
                {% block header %}{% endblock %}
                {% block content %}
                <!-- Example row of columns -->
                <div class="row">
                    <div class="span6">
                        <h2>Heading</h2>
                        <p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
                        <p><a class="btn" href="#">View details &raquo;</a></p>
                    </div>
                </div>
                <hr>
                {% endblock %}
            </div>
        </div>
        {% endblock %}
        {% block footer %}
        <footer class="container-fluid">
          <p>&copy; Kateba 2012</p>
        </footer>
        {% endblock %}
        {% block javascripts %}
        <script src="{{ asset('js/jquery-1.7.1.min.js') }}" type="text/javascript"></script>
        {% endblock %}
        {% endblock %}
    </body>
</html>
